在一個風雨交加、打雷閃電的夜晚，我正坐在電腦前專注地看著螢幕中的文章並喃喃自語著。
「哇賽！才幾年沒碰 Web Front-End，怎麼前端世界變了這麼多阿？！」
「什麼 MPA、SPA 的，真是天上一天、人間一年阿！！」
拿起一旁已放涼的咖啡一口氣喝下後，便繼續埋首於「書海」中...。
MPA （Multi-Page Application） 指的是一般傳統 Web Front-End 開發方式。一個畫面，一個 HTML 檔案。舉例來說：
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="pages/about.html">關於我們</a></li>
<li><a href="pages/news.html">最新消息</a></li>
<li><a href="pages/products.html">所有產品</a></li>
<li><a href="pages/contact.html">聯絡我們</a></li>
</ul>
假設使用者點擊「首頁」這個連結時，瀏覽器會發出一個需求到伺服器說：我需要 index.html 這個檔案的資料，然後伺服器再把 index.html 這個檔案的資料回傳給瀏覽器顯示。
或者像是使用者填完表單按下送出，瀏覽器將資料送伺服器處理完後，伺服器再把接下來要呈現的 HTML 檔案回傳給瀏覽器。像是：
上述看似再正常不過的流程，其實有個缺點：頁面重整。
因為每個頁面都不是只有單純的 HTML 而已，還有其所需要的 CSS 與 JavaScript 檔，這些檔案都會在頁面重整的時候需要多花不少時間去下載，造成比較差的使用者體驗。
SPA （Single-Page Application） 顧名思義，就是整個網站實際上其實只有一個頁面。
為了解決上述提到的頁面重整的問題，我們可以使用 AJAX （Asynchronous JavaScript And XML，非同步的 JavaScript 與 XML） 的技術來處理，令其在送出資料且收到伺服器的回覆後，只針對需要更新的頁面元素來更新。如下圖所示：
除了透過 AJAX 的方式來解決頁面重整的問題外，SPA 也有令前後端分離、提供使用者更偏向 Desktop/Mobile App 的使用者體驗等好處。
不過如果 SPA 這麼好？那大家為什麼都不用 SPA 的方式來開發就好？
黃金無足色，白璧有微瑕。求人不求備，妾願老君家。 ─ 宋‧戴復古《寄興》
世界上沒有什麼事情是完美無缺的，SPA 亦然之。所以，我們來比較一下 MPA 與 SPA：
MPA 優點：
MPA 缺點：
SPA 優點：
SPA 缺點：
考慮到以上優缺點， MPA 跟 SPA 都有其各自較適合使用的情境。
舉例來說：比較偏向行銷類的網站如官網、活動網站等，或許會比較推薦使用傳統 MPA 的開發方式；比較偏向內部使用的系統如出勤系統、管理系統等，或許就會比較推薦使用 SPA 的開發方式。
當然也可以行銷類網站用 SPA，內部系統用 MPA，一切都看客戶、團隊或是公司怎麼選擇而已。
另外，除了上述這些之外，其實也還有其他層面的優缺點，不過在此我只列出上述這幾項來比較，其他就不再贅述。
iThome鐵人賽
看影片追技術